<template>
  <n-modal
      v-model:show="props.modalData.show"
      class="custom-card"
      preset="card"
      :style="{ width: '600px' }"
      title="新建分组"
      :bordered="false"
      :segmented="{
      content: 'hard',
      footer: 'hard'
    }"
  >
    <n-form ref="formRef" :model="form" label-placement="left" :label-width="90" :rules="rules">
      <n-form-item label="分组名称" path="groupName">
        <n-input v-model:value="form.groupName" clearable show-count maxlength="20"/>
      </n-form-item>
    </n-form>

    <template #footer>
      <n-space justify="end">
        <n-button @click="handleClose">取消</n-button>
        <n-button type="primary" @click="handleSave">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup>
import {NButton, NForm, NFormItem, NInput, NModal, NSpace,} from 'naive-ui'
import {ref} from 'vue'
import {reqSaveMediaGroup} from "@/api";

const emits = defineEmits(['success'])
const props = defineProps({
  modalData: {
    type: Object,
    required: true
  }
})
const form = ref({
  groupName: props.modalData.groupName
})
const formRef = ref(null)
const rules = ref({
  groupName: {required: true, message: '请输入', trigger: ['input', 'blur']}
})

function handleClose() {
  props.modalData.show = false
}

function handleSave() {
  formRef.value.validate(async errors => {
    if (!errors) {
      await reqSaveMediaGroup({
        ...form.value,
        id: props.modalData.groupId,
      })
      emits('success')
      props.modalData.show = false
    } else {
      console.log(errors)
    }
  })
}
</script>

<style scoped lang="scss"></style>
